<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>

{% load staticfiles %}
<link type="image/x-icon" rel="shortcut icon" href="{% static "favicon.ico" %}">
<link type="text/css" rel="stylesheet" href="{% static "css/common.css" %}">
<link type="text/css" rel="stylesheet" href="{% static "css/index.css" %}">
</head>
<body class="index">

{#首页搜索框,由HTML表单实现,{% url 'search' xxx %}是搜索页面的地址链接#}
<div class="header">
    <a href="/" class="logo" title="首页"><img src="/static/image/logo.png "alt="我的音乐"></a>
    <div class="search-box">
<form id="searchFrom" action="{% url 'search' 1 %}" method="post" target="_blank">
    {% csrf_token %}
    <div class="search-keyword">
        <input type="text" name="kword" class="keyword" maxlength="120" placeholder="音乐节" />
    </div>
    <input type="submit" id="subSearch" class="keyword" value="搜 索" />
  </form>
</div>

{#搜索框下面的热门搜索歌曲, {% url 'play' xxx %}是播放页面的地址链接#}
<div id="suggest" class="search-suggest"></div>
<div class="search-hot-words">
    {% for song in search_song %}
        <a target="play" href="{% url 'play' song.song.song_id %}">{{ song.song.song_name }}</a>
    {% endfor %}
</div>
</div>


{#网站导航栏#}
<ul class="nav clearfix">
    <li><a href="/">首页</a></li>
    <li><a href="{% url 'ranking' %}" target="_blank">歌曲排行</a></li>
    <li><a href="{% url 'home' 1 %}" target="_blank">用户中心</a></li>
</ul>

{#音乐分类, 位于轮播图的左侧#}
<div class="category-nav-body">
    <div id="J_CategoryItems" class="category-items">
        {% for label in label_list %}
            <div class="item" data-index="1">
            <h3><a href="javascript:;">{{ label.label_name }}</a></h3>
            </div>
        {% endfor %}
    </div>
</div>


{#轮播图 {% url 'play' 12 %}是播放页面的连接地址#}
<div id="J_FocusSlider" class="focus">
    <div id="bannerLeftBtn" class="banner_btn">
        <ul class="focus-list f_w">
            <li class="f_s"><a target="play" href="{% url 'play' 12 %}" class="layz_load">
                <img data-src="{% static '/image/datu-1.jpg' %}" width="750" height="275">
            </a></li>
            <li class="f_s"><a href="{% url 'play' 13 %}" target="play" class="layz_load">
                <img data-src="{% static '/image/datu-2.jpg' %}" width="750" height="275" alt="">
            </a></li>
        </ul>
    </div>
</div>


{## 热门歌曲位于轮播图右侧#}
<div class="aside">
    <h2>热门歌曲</h2>
    <ul>
        {% for song in play_hot_song %}
        <li>
            <span>{{ forloop.counter }}</span>
            <a href="{% url 'play' song.song.song_id %}" target="play">
                {{ song.song.song_name }}
            </a>
        </li>
        {% endfor %}
    </ul>
</div>

{#新歌推荐#}
<div id="J_TodayRec" class="today-list">
				<ul>
                {% for list in daily_recommendation  %}
                    {% if forloop.first  %}
                        <li class="first">
                    {% else  %}
                        <li>
                    {% endif  %}
                    <a class="pic layz_load pic_po" target="play" href="{% url 'play' list.song_id %}" >
                        <img data-src="{% static "songImg/" %}{{ list.song_img }}"  ></a>
                    <div class="name">
                        <h3><a target="play" href="{% url 'play' list.song_id %}" >{{ list.song_name }}</a></h3>
                        <div class="singer"><span>{{ list.song_singer }}</span></div>
                        <div class="times">发行时间：<span>{{ list.song_release }}</span></div>
                    </div>
                    <a target="play" href="{% url 'play' list.song_id %}" class="today-buy-button" >去听听></a>
                {% endfor  %}
				</ul>
			</div>

{#热门搜索和热门下载#}
    <div class="section">
		<ul id="J_Tab" class="tab-trigger">
	  	<li data-cur="0" class="current t_c">热门搜索</li>
        <li data-cur="1" class="t_c">热门下载</li>
		</ul>
		<div class="tab-container">
	    <div id="J_Tab_Con" class="tab-container-cell">
            {% for list in all_ranking  %}
                {% if forloop.first %}
                    <ul class="product-list clearfix t_s current">
                {% else  %}
                    <ul class="product-list clearfix t_s" style="display:none;">
                {% endif  %}
                    {% for songs in list  %}
                    <li>
                        <a target="play" href="{% url 'play' songs.song.song_id %}" class="pic layz_load pic_po" >
                            <img data-src="{% static "songImg/" %}{{ songs.song.song_img }}" ></a>
                        <h3><a target="play" href="{% url 'play' songs.song.song_id %}" >{{ songs.song.song_name }}</a></h3>
                        <div class="singer"><span>{{ songs.song.song_singer }}</span></div>
                        {% if all_ranking|first  == list %}
                        <div class="times">搜索次数：<span>{{ songs.dynamic_search }}</span></div>
                        {% else %}
                        <div class="times">下载次数：<span>{{ songs.dynamic_down }}</span></div>
                        {% endif %}
                    </li>
                    {% endfor %}
                    </ul>
            {% endfor %}
        </div>
        </div>
</div><!--end section-->

</body>
<script data-main="{% static "js/index.js" %}" src="{% static "js/require.js" %}"></script>
</html>